{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import google_play_button, apple_app_store_button with context %}
{% from "macros-protocol.html" import callout with context %}

{% extends "firefox/welcome/base.html" %}

{% block page_title %}{{ ftl('welcome-page4-download-the-firefox-browser') }}{% endblock %}

{% block body_class %}{{ super() }} welcome-page4{% endblock %}

{% set show_send_to_device = LANG in settings.SEND_TO_DEVICE_LOCALES %}
{% set android_url = play_store_url('firefox', 'firefox-welcome-4') %}
{% set ios_url = app_store_url('firefox', 'firefox-welcome-4') %}

{%block page_css %}
 {{ super()}}
 {{ css_bundle('protocol-callout') }}
{% endblock %}

{% set _entrypoint = 'mozilla.org-firefox-welcome-4' %}
{% set _utm_campaign = 'welcome-4-mobile' %}

{% block content_intro %}
{% call callout(
    title=ftl('welcome-page4-privacy-every-screen-now', fallback='welcome-page4-wallet-keys-phone-firefox'),
    desc=ftl('welcome-page4-privacy-on-by-default', fallback='welcome-page4-take-privacy-with-you-on-every'),
    class='mzp-t-firefox mzp-t-hero',
    include_cta=True,
    heading_level=1
  ) %}

  <div class="primary-cta">
    {% if show_send_to_device %}
      <h2 id="get-firefox">{{ ftl('welcome-page4-get-firefox-on-your-phone') }}</h2>
      <p>{{ ftl('welcome-page4-send-the-download-link-right') }}</p>
      {{ send_to_device(
        include_title=False,
        message_set='firefox-mobile-welcome',
        button_class='mzp-t-lg') }}

    {% else %}
      <h2>{{ ftl('welcome-page4-download-firefox-for-your') }}</h2>
      <div class="qr-code-wrapper">
        <img src="{{ static('img/firefox/welcome/qrcode-firefox-welcome-4.png') }}" id="firefox-qr"
          data-testid="firefox-qr-code" alt="">
      </div>
    {% endif %}
    <ul class="c-store-badges">
      <li class="c-store-badge-google">
        {{ google_play_button(href=android_url, id='playStoreLink') }}
      </li>
      <li class="c-store-badge-apple">
        {{ apple_app_store_button(href=ios_url, id='appStoreLink') }}
      </li>
    </ul>
  </div>
{% endcall %}
{% endblock %}

{% block content_primary %}
<div class="body-primary">
  <img class="primary-image" src="{{ static('img/firefox/welcome/mobile-hero-v2.png') }}" width="700" height="" alt="{{ ftl('welcome-page4-download-firefox-for-your') }}">
  <p class="primary-image-desc">{{ ftl('welcome-page4-firefox-private-safe-browser') }}</p>
</div>

{% endblock %}

{% block content_secondary %}
<div class="c-picto-block t-adjacent-image">
  <div class="c-picto-block-image">
    <img src="{{ static('img/icons/gradient-shield.svg') }}" alt="">
  </div>

  <h3 class="c-picto-block-title">{{ ftl('welcome-page4-get-data-trackers-off-your') }}</h3>
  <div class="c-picto-block-body">
    <p>
      {{ ftl('welcome-page4-enhanced-tracking-protection', privacy='https://support.mozilla.org/kb/trackers-and-scripts-firefox-blocks-enhanced-track/?utm_source='+_entrypoint+'&utm_medium=referral&utm_campaign='+_utm_campaign+'&entrypoint='+_entrypoint) }}
    </p>
  </div>
</div>

<div class="c-picto-block t-adjacent-image">
  <div class="c-picto-block-image">
    <img src="{{ static('img/icons/cookies-pink.svg') }}" alt="">
  </div>

  <h3 class="c-picto-block-title">{{ ftl('welcome-page4-leave-no-trace') }}</h3>
  <div class="c-picto-block-body">
    <p>{{ ftl('welcome-page4-automatically-clear-your-history') }}</p>
  </div>
</div>

<div class="c-picto-block t-adjacent-image">
  <div class="c-picto-block-image">
    <img src="{{ static('img/icons/speedometer-orange.svg') }}" alt="">
  </div>

  <h3 class="c-picto-block-title">{{ ftl('welcome-page4-go-faster-do-more', fallback='welcome-page4-take-it-all-with-you') }}</h3>
  <div class="c-picto-block-body">
    <p>{{ ftl('welcome-page4-more-done-fast-smart', fallback='welcome-page4-dont-walk-out-the-door-without') }}</p>
  </div>
</div>
{% endblock %}

{% block secondary_cta %}
<div class="secondary-cta">
  <a class="mzp-c-button" data-cta-position="secondary" data-cta-text="Get the Firefox App" href="#get-firefox">
    {{ ftl('welcome-page4-get-the-firefox-mobile') }}
  </a>
</div>
{% endblock %}

{% block content_utility %}
<p>
  <strong>
    <a href="https://support.mozilla.org/kb/firefox-browser-welcome-pages/?utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}&entrypoint={{ _entrypoint }}">
      {{ ftl('welcome-page4-why-am-i-seeing-this') }}
    </a>
  </strong>
</p>
{% endblock %}

{% block js %}
{{ js_bundle('firefox_welcome_page4') }}
{% endblock %}
